<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { spotsInfoStore } from '@/stores/spots';
import { DriversInfoStore } from '@/stores/driver';
import FuncFood from './FuncFoodHouse/FuncFood.vue';
import FuncHouse from './FuncFoodHouse/FuncHouse.vue';
import CarDriver from './Driver/CarDriver.vue';
import Weather from '@/views/Weather.vue';


const router = useRouter()
const spotsStore = spotsInfoStore()
const driversStore = DriversInfoStore()
const showFood = ref(false)
const showHouse = ref(false)
const showType = ref(true)
const open = ref(false)


const onClick = ({ key }) => {
    console.log(key);
    if (key == 1) {

        showType.value = true
    }
    else if (key == 2) {

        showType.value = false
    }
};
const controls = ({ key }) => {
    if (key == 1) {
        router.push('/spotsAdmin')
    }
    else if (key == 2) {
        // console.log(spotsStore.FuncFoodOn);
        spotsStore.SetFuncFoodOn(!spotsStore.FuncFoodOn)
        // console.log(spotsStore.FuncFoodOn);
    }
    else if (key == 3) {
        // console.log(spotsStore.FuncFoodOn);
        spotsStore.SetFuncHouseOn(!spotsStore.FuncHouseOn)
        // console.log(spotsStore.FuncFoodOn);
    }
}
const ControlsDriver = ({ key }) => {
    if (key == 1) {
        driversStore.SetCarOpen(!driversStore.CarOpen)
        driversStore.SetFuncCarDriver(true)
        driversStore.SetSelecType('Car')
    }
    else if (key == 2) {
        driversStore.SetCarOpen(!driversStore.CarOpen)
        driversStore.SetFuncCarDriver(true)
        driversStore.SetSelecType('Public')
    }
    else if (key == 3) {
        driversStore.SetCarOpen(!driversStore.CarOpen)
        driversStore.SetFuncCarDriver(true)
        driversStore.SetSelecType('Walk')
    }
}
const WeatherOpen = () => {
    open.value = true
}
const handleOk = () => {
    open.value = false;
};
const handlecancel = () => {
    open.value = false
}
</script>
<template>
    <div class="map">
        <div id="capbt">
            <a-dropdown>
                <a-button>功能</a-button>
                <template #overlay>
                    <a-menu @click="controls">
                        <a-menu-item key="1">景点管理界面</a-menu-item>
                        <a-menu-item key="2">特色餐饮 <a-switch v-model:checked="showFood" checked-children="显示"
                                un-checked-children="关闭" /></a-menu-item>
                        <a-menu-item key="3">住宿推荐 <a-switch v-model:checked="showHouse" checked-children="显示"
                                un-checked-children="关闭" /></a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
        <div id="capbt">
            <a-dropdown>
                <a-button>路径规划</a-button>
                <template #overlay>
                    <a-menu @click="ControlsDriver">
                        <a-menu-item key="1">驾车路线(2-18个标记点)</a-menu-item>
                        <a-menu-item key="2">公共交通(限2个标记点)</a-menu-item>
                        <a-menu-item key="3">步行路线(限2个标记点)</a-menu-item>
                    </a-menu>
                </template>
            </a-dropdown>
        </div>
        <div id="capbt">
            <a-button @click="WeatherOpen">天气情况</a-button>
            <a-modal v-model:open="open" title="天气查询" @ok="handleOk" @cancel="handlecancel">
                <Weather />
            </a-modal>
        </div>
    </div>
    <FuncFood />
    <FuncHouse />
    <CarDriver />
</template>

<style lang="scss" scoped>
#capbt .ant-btn {
    margin: 5px;
    min-width: 60px;
}

.map {
    display: flex;
    justify-content: space-around;
    line-height: 70px;
}
</style>